<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title>
          {{ name }}
        </q-toolbar-title>

        <div>{{ title }} v1.0.0</div>
        <!-- <q-btn flat round dense icon="close" /> -->
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <!-- <q-img
        class="absolute-top"
        src="https://cdn.quasar.dev/img/material.png"
        style="height: 150px"
      >
        <div class="absolute-bottom bg-transparent">
          <q-avatar size="56px" class="q-mb-sm">
            <img :src="headimgurl" />
          </q-avatar>
          <div class="text-weight-bold">{{ username }}</div>
        </div>
      </q-img> -->
      <q-scroll-area style="height: calc(100% - 150px)">
        <q-toolbar class="bg-primary text-white shadow-2">
          <q-toolbar-title>菜单</q-toolbar-title>
        </q-toolbar>
        <q-list padding>
          <q-item active clickable v-ripple @click="handleMeeting">
            <q-item-section avatar>
              <q-icon name="inbox" />
            </q-item-section>

            <q-item-section> 视频会议室 </q-item-section>
          </q-item>
          <!--
          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="star" />
            </q-item-section>

            <q-item-section> Star </q-item-section>
          </q-item>

          <q-item clickable v-ripple>
            <q-item-section avatar>
              <q-icon name="send" />
            </q-item-section>

            <q-item-section> Send </q-item-section>
          </q-item> -->

          <q-item clickable v-ripple @click="onClose">
            <q-item-section avatar>
              <q-icon name="logout" />
            </q-item-section>

            <q-item-section> 退出 </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "src/stores/user";
import defaultSettings from "src/utils/settings";

const userStore = useUserStore();
const router = useRouter();

defineOptions({
  name: "MainLayout",
});

const leftDrawerOpen = ref(false);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

const name = ref(defaultSettings.name);
const title = ref(defaultSettings.title);
const username = ref("");
username.value = userStore.getName();
const headimgurl = ref(userStore.getHeadimgurl());

function onClose() {
  userStore.clearAll();
  router.replace("/login");
}

function handleMeeting() {
  router.replace("/");
}
</script>
